<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="title">法币账户</p>
      <div class="allAsset">
        <div class="d3">
          <div>
            <p class="title">总资产 (估值) </p>
            <p class="msg">{{asset_deposit}}CNY</p>
          </div>
        </div>
        <p class="p4">
          <router-link to="/recharge">
            <img src="../common/imgs/iconchonghzi .png" alt="">
            <span>充值</span>
          </router-link>
          <router-link to="/cashWithdraw">
            <img src="../common/imgs/icontixian.png" alt="">
            <span>提现</span>
          </router-link>
          <router-link to="/bill">
            <img src="../common/imgs/iconzhangdan.png" alt="">
            <span>账单</span>
          </router-link>
        </p>
      </div>
    </section>
    <section id="sec2">
      <p class="p1">
        <label for="hideZero">
          <input type="checkbox" id="hideZero" v-model="hideZero">
          <span>隐藏资产为0的帐户</span>
        </label>
      </p>
      <table cellpadding="0" cellspacing="0" border="0">
        <thead>
        <tr>
          <td>币种</td>
          <td>总量</td>
          <td>折合CNY</td>
          <td>可用</td>
          <td>冻结</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in math_list" v-if="item.show">
          <td>{{item.name}}</td>
          <td>{{item.coin}}</td>
          <td>{{item.total_price}}</td>
          <td>{{item.can_use_coins}}</td>
          <td>{{item.freeze_num || '0.00'}}</td>
          <td class="setting">
            <router-link to="/recharge" class="add" v-if="item.name === 'CNY'">充值</router-link>
            <router-link to="/cashWithdraw" class="withdraw" v-if="item.name === 'CNY'">提现</router-link>
            <router-link to="/bill" class="bill">账单</router-link>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>
<script>
  import { myAssets } from '../http/api';
  export default {
    name : 'asset',
    data(){
      return{
        hideZero : false,//是否隐藏0资产
        asset_deposit:'',//账户总资产
        otcMoney:'',//otc余额等信息
        // machine_deposit:'',//合约包总金额
        math_deposit :0,//数字资产总和
        cny:'',//cny合约包余额
        power_list:[],//合约包列表
        cnyMoney :'',//cny余额
        math_list: [],//数字资产列表
        coins:['btc','eth','ltc','fil','bhp','bhp_fh','usdt'],//数字资产 图片提前加载 , ajax拿到的数据，根据coins的keys来排序
        powerOrder : ['USDT' , 'BCNY' ,'CNY'], //合约包排序规则
      }
    },
    mounted() {
      let thiz = this;
      myAssets().then(res => {
        let data = res.data.res;
        let assets_lists = data.assets_lists.BCNY ? data.assets_lists : null;
        let yue_otc = data.yue_otc.total_price || 0;
        let freeze_otc = data.yue_otc.freeze_total_price || 0;
        thiz.otcMoney = thiz.accAddMore( yue_otc , freeze_otc );//otc余额
        thiz.cnyMoney = data.cny.CNY ?  thiz.numSlice( data.cny.CNY.availableAssetConversion , 2) : 0;//cny余额
        thiz.asset_deposit = thiz.numSlice(thiz.accAddMore(thiz.cnyMoney ,thiz.otcMoney) , 2 ) || '0.00';//账户总资产
        // thiz.asset_deposit = thiz.numSlice(thiz.accAddMore(thiz.cnyMoney ,thiz.otcMoney) , 2 ) || '0.00';//账户总资产
        thiz.packageMathList(data);//数字资产列表
      });
    },
    watch:{
      'hideZero'(val){
        let mathList = this.math_list;
        let thiz = this;
        this.for(mathList , (item , index) => {
          if(val){
            let coin = item.coin;
            let freeze_coin = item.freeze_coin || 0;
            let result = Number(thiz.accAddMore(coin , freeze_coin));
            item.show = result === 0 ? false : true;
          }else{
            item.show = true;
          }
        });
        thiz.math_list = mathList;
      }
    },
    methods:{
      packageMathList(data){
        let cny = this.cnyMoney;
        let CNY_DATA = data.cny.CNY;
        let otcObj = data.yue_otc;
        otcObj.name = '余额OTC';
        otcObj.show = true;
        otcObj.can_use_coins = otcObj.coin;
        otcObj.freeze_num = otcObj.freeze_coin;
        let cnyObj = {
          name : 'CNY',
          coin : cny,
          total_price : cny,
          can_use_coins : cny,
          freeze_num : CNY_DATA.freezeAsset,
          show : true,
        };
        let math_list = [otcObj , cnyObj];
        this.math_list = math_list;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-bottom: 150px;
  }
  section{
    .borderRadius();background: #fff;padding: 25px;
  }
  #sec1{
    >.title{
      font-size: 24px;color: #262626;
    }
    >.allAsset{
      padding-top: 32px;width: 100%;
      >.d3{
        overflow: hidden;padding-top: 0px;
        .title{
          color: #999999;font-size: 14px;
        }
        .msg{
          font-size: 18px;color: #262626;padding-top: 20px;
        }
        >div{
          float: left;width: 25%;position: relative;padding-left: 84px;
          &:first-child{
            padding-left: 0;
            >.msg{
              .colorYellow;font-size: 24px;font-weight: 600;padding-top: 17px;
            }
          }
        }
      }
      >.p4{
        overflow: hidden;padding-top: 41px;
        >a{
          display: inline-block;height: 40px;.border;.borderRadius;width: 109px;margin-left: 17px;
          &:first-child{
            margin-left: 0;
          }
          &:hover{
            border-color: #fbd194;
          }
          >img{
            vertical-align: middle;width: 22px;height: 22px;
          }
          >span{
            vertical-align: middle;line-height: 40px;font-size: 14px;
          }
        }
      }
    }
  }
  #sec2{
    margin-top: 8px;min-height: 440px;padding-bottom: 50px;
    >.p1{
      text-align: right;color: #999999;font-size: 12px;position: relative;
      label{
        position: relative;height: 22px;display: inline-block;
        span{
          position: relative;padding-left: 22px;display: inline-block;line-height: 22px;height: 22px;
          &:before{
            content: '';width: 16px;height: 16px;display: block;border: 1px solid#999999;position: absolute;z-index: 1;left: 0;top: 50%;margin-top: -8px;.borderRadius;box-sizing: border-box;
          }
        }
        input{
          opacity: 0;width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top:0;
          &:hover{
            cursor: pointer;
          }
          &:checked+span:before{
            content: '';display: inline-block;border: 0;background: url("../common/imgs/checkedbgyellow.png") center center no-repeat;background-size: 100% 100%;
          }
        }
      }
    }
    table{
      width: 100%;
    }
    thead {
      >tr>td:last-child{
        text-align: right;
      }
      td{
        color: #999999;font-size: 14px;padding: 20px 0;
      }
    }
    tbody{
      td{
        border-bottom: 1px solid#F4F4F6;padding: 15px 0;color: #262626;font-size: 12px;
      }
      >tr>td:last-child{
        text-align: right;
      }
      .setting{
        >a{
          display: inline-block;margin-left: 40px;
          &:first-child{
            margin-left: 0;
          }
        }
        .add{
          color: #2785FA;
        }
        .withdraw{
          color: #DD6936;
        }
        .bill{
          .colorYellow;
        }
      }
    }
  }
</style>
